/* eslint-disable vue/html-indent */
/* eslint-disable vue/html-indent */
<template>
  <div class="cs-page-container">

    <el-tabs value="first" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="邀请数据" name="first" />
      <el-tab-pane label="邀请列表" name="second" />

      <div class="cs-filter-container">
        <el-select
          v-model="listQuery.channel"
          clearable
          filterable
          placeholder="渠道"
        >
          <el-option
            v-for="(channel, i) in channels"
            :key="i"
            :label="channel"
            :value="channel"
          />
        </el-select>
        <el-date-picker
          v-model="daterangeValue"
          :picker-options="daterangePickerOptions"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="起始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd"
          clearable
          @change="daterangeChangedTimestamp"
        />
        <el-button
          type="primary"
          icon="el-icon-search"
          :loading="listLoading"
          @click="handleFilter"
        >查询</el-button>
        <el-button
          type="info"
          size="small"
          icon="el-icon-refresh-right"
          @click="resetFilter"
        >重置</el-button>    </div>
      <div class="cs-filter-result">
        <el-table
          v-loading="listLoading"
          :data="list"
          :height="'calc(100vh - 300px)'"
          border
          fit
          size="small"
          highlight-current-row
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <el-table-column
            align="center"
            label="日期"
          >
            <template slot-scope="{row}">
              <span>{{ row.targetDate | parseTime('{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="激活人数"
          >
            <template slot-scope="{row}">
              <span>{{ row.activateCount }}</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="登录人数"
          >
            <template slot-scope="{row}">
              <span>{{ row.activeCount }}</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="发送邀请次数"
          >
            <template slot-scope="{row}">
              <span>{{ row.invitationCount }}</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="发送邀请人数"
          >
            <template slot-scope="{row}">
              <span>
                {{ row.inviterCount }}
              </span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="点击邀请次数"
          >
            <template slot-scope="{row}">
              <span>{{ row.invitationAcceptedCount }}</span>
            </template>
          </el-table-column>

          <el-table-column
            align="center"
            label="新增徒弟人数"
          >
            <template slot-scope="{row}">
              <span>{{ row.newApprenticeCount }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="新增师傅人数"
          >
            <template slot-scope="{row}">
              <span>{{ row.newMentorCount }}</span>
            </template>
          </el-table-column>
        </el-table>
        <TablePagination
          :current-page="listQuery.page"
          :limit="listQuery.limit"
          :total="total"
          :loading="listLoading"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChangeOffset"
        />
      </div>
    </el-tabs>
  </div>
</template>

<script>
import TablePagination from '@/components/TablePagination'
import DATEPICKER_OPTIONS from '@/config/datepickerOptions'
import { xhrDivisionList } from '@api/analysis'

export default {
  name: 'DivisionList',
  components: { TablePagination },
  data() {
    return {
      list: [],
      channels: [],
      total: 0,
      listQuery: {
        offset: 0,
        limit: 100,
        startTime: null,
        endTime: null,
        channel: null,
        gender: null
      },
      daterangeValue: '',
      daterangePickerOptions: DATEPICKER_OPTIONS.daterangePickerOptions
    }
  },
  created() {
    this.getChannels()
    this.doSearch()
  },
  methods: {
    getChannels() {
      this.xhrGetChannels().then(resp => {
        this.channels = resp.data
      })
    },
    doSearch() {
      xhrDivisionList(this.listQuery).then(resp => {
        this.listLoading = false
        this.total = resp.data.count
        this.list = resp.data.list
      })
    },
    handleClick(tab) {
      switch (tab.name) {
        case 'second':
          this.$router.push('/todo')
          break
      }
    }
  }
}
</script>
